I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url: http://www.reenie.org/test/test5.php
Here is the code:
<html>
<head>
<title>
asdf
</title>
<style>
.onetime{float:left; margin-right:1em;width:20em;border:solid 1px;}
.clear { clear: both; line-height: 0px } </style>
</head>
<body>
<div class="onetime">
xxxxxxxxxx
</div>
<div class="onetime">
xxxxxxxxxxx
</div>
<div class="onetime">
xxxxxxxxxxxxx
</div>
<div class="clear">
</div>
<h4>a heading</h4>
</body>
</html> 12  2789 
meltedown <gr*****@reenie.org> wrote: I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url:http://www.reenie.org/test/test5.php
The header is *not* displayed to the right of the divs, so what are you
on about?
--
Spartanicus
Spartanicus wrote: meltedown <gr*****@reenie.org> wrote:
I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url:http://www.reenie.org/test/test5.php
The header is *not* displayed to the right of the divs, so what are you
on about?
Its is in IE, but not in firefox.
meltedown <gr*****@reenie.org> wrote: I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url:http://www.reenie.org/test/test5.php
The header is *not* displayed to the right of the divs, so what are you
on about?
Its is in IE
Not in my IE6/win (if I comment out one of the floated divs, otherwise I
don't have sufficient screen width available). http://homepage.ntlworld.ie/spartanicus/test5.htm
Btw, if an existing element is available, use that to attach the clear
property to (in the example you can use the h4, no need for the div).
--
Spartanicus
Spartanicus wrote: meltedown <gr*****@reenie.org> wrote:
I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url:http://www.reenie.org/test/test5.php
The header is *not* displayed to the right of the divs, so what are you
on about?
Its is in IE
Not in my IE6/win
Some how I think we've got mixed up about what "not" means, so let me
clarify.
http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.
In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?
(if I comment out one of the floated divs, otherwise I don't have sufficient screen width available).
It shouldn't matter. You shouldn't need the extra screen width because
the divs should float to the left. I put the extra div in there
deliberately to show the floating meachanism. http://homepage.ntlworld.ie/spartanicus/test5.htm
Btw, if an existing element is available, use that to attach the clear
property to (in the example you can use the h4, no need for the div). http://reenie.org/test/test6.php
Here I have followed this suggestion, taking out the empty 'clear' div
and it fixed the problem.
However, now there is another problem. (Which is actually the original
problem that got me started)
In IE/win, the header has the default header top margin.
In firefox, there is no top margin.
Here is the same file again but I have added a 2em margin-top to the header: http://reenie.org/test/test7.php
The margin is added ABOVE the floating divs, which is crazy. (And now IE
has TOO MUCH margin.
ARRRRRRRRRRRRRRRRRRRRRRRG!!!
Whats the fix for this?
meltedown wrote: http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.
Add something to the clearing div.
<div class="clear">
</div>
Now it works in Firefox.
In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?
Maybe, maybe not. Perhaps Firefox is not displaying/rendering the
*empty* <div>? Makes good sense to me. :-)
--
-bts
-Warning: I brake for lawn deer
Beauregard T. Shagnasty wrote: meltedown wrote:
http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.
Add something to the clearing div.
<div class="clear">
</div>
Now it works in Firefox.
In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?
Maybe, maybe not. Perhaps Firefox is not displaying/rendering the
*empty* <div>? Makes good sense to me. :-)
OK, I guess that makes sense, but I would not like to add an extra
empty space, even if its only Clearing the header works too.
meltedown <gr*****@reenie.org> wrote: let me clarify.
http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.
If you have problems with a particular client then you need to say so,
we can't read minds here. Both in IE and Opera the header clears the
floats.
In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?
It's perfectly acceptable not to render an element with no content or
height. Btw, if an existing element is available, use that to attach the clear
property to (in the example you can use the h4, no need for the div).
http://reenie.org/test/test6.php
Here I have followed this suggestion, taking out the empty 'clear' div
and it fixed the problem.
However, now there is another problem. (Which is actually the original
problem that got me started)
In IE/win, the header has the default header top margin.
In firefox, there is no top margin.
Here is the same file again but I have added a 2em margin-top to the header:
http://reenie.org/test/test7.php
The margin is added ABOVE the floating divs, which is crazy. (And now IE
has TOO MUCH margin.
The way that CSS handles collapsing margins is ridiculous and complex,
it's a common cause of author frustration, not least because of the
numerous browser inconsistencies. Throwing floats into the mixture only
makes it worse.
Before explaining further first we need to know what it is that you are
actually trying to do. Maybe the matter can be avoided.
--
Spartanicus
But take note: FF 1.5 Beta renders it the same as IE 6 - that is, it
renders the empty <div> and causes the heading to fall on a new line.
Opera does the same. Netscape 8.0.3.3, however, renders as described
for FF 1.0
What is the actual CSS spec for the rendering of an empty div with no
height or width defined, but with clear:both set?
Spartanicus wrote: meltedown <gr*****@reenie.org> wrote:
let me clarify.
http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.
If you have problems with a particular client then you need to say so,
Yes I realize that. My bad. we can't read minds here. Both in IE and Opera the header clears the
floats.
In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?
It's perfectly acceptable not to render an element with no content or
height.
Btw, if an existing element is available, use that to attach the clear
property to (in the example you can use the h4, no need for the div).
http://reenie.org/test/test6.php
Here I have followed this suggestion, taking out the empty 'clear' div
and it fixed the problem.
However, now there is another problem. (Which is actually the original
problem that got me started)
In IE/win, the header has the default header top margin.
In firefox, there is no top margin.
Here is the same file again but I have added a 2em margin-top to the header:
http://reenie.org/test/test7.php
The margin is added ABOVE the floating divs, which is crazy. (And now IE
has TOO MUCH margin.
The way that CSS handles collapsing margins is ridiculous and complex,
it's a common cause of author frustration, not least because of the
numerous browser inconsistencies. Throwing floats into the mixture only
makes it worse.
I get along with it pretty well, but I don't get along with liquid
layouts. The only thing I can do is slog through the problems one by
one hoping eventually I'll get the hang of it. I always give it a try
but I usually give up and use tables, or non-liquid divs. (What's the
word for that? static ? ).
Before explaining further first we need to know what it is that you are
actually trying to do. Maybe the matter can be avoided.
I want to have a series of floating divs and then, below that, a header
with a normal header top-margin. If I could get Firefox to do what IE
does to http://reenie.org/test/test7.php , that would be nice. And of
course, they should both look the same
"Tony" <to****@dslextreme.com> wrote: What is the actual CSS spec for the rendering of an empty div with no
height or width defined, but with clear:both set?
Afaik there is no defined behaviour for such cases. Browsers are free to
"render" such an element, or drop it.
The HTML 4 spec prose says that UAs should ignore empty P elements, but
afaik there is no such requirement for other empty elements.
--
Spartanicus
meltedown wrote:
I want to have a series of floating divs and then, below that, a header
with a normal header top-margin. If I could get Firefox to do what IE
does to http://reenie.org/test/test7.php , that would be nice. And of
course, they should both look the same
..clear { clear: left;padding-top:2em; }
--
Gus
Gus Richter wrote: meltedown wrote:
I want to have a series of floating divs and then, below that, a
header with a normal header top-margin. If I could get Firefox to do
what IE does to http://reenie.org/test/test7.php , that would be nice.
And of course, they should both look the same
.clear { clear: left;padding-top:2em; }
Almost but not quite. Thanks for the idea, though.
Here they look the same: http://reenie.org/test/test8.php
I used padding, but I also had to take away the header's margin-top
because IE shows the the header's padding and margin while Firefox only
shows the padding. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Olly |
last post by:
I am using the following pure css layout with a header and footer:
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml
The left column floats to the left of the main content (middle...
|
by: veerleverbr |
last post by:
Hi,
I have the following html:
<div id="content">
<div id="leftpart">...</div>
<div id="rightpart">...</div>
</div>
leftpart en rightpart are in the css set to float left. The content of...
|
by: StevePBurgess |
last post by:
I have a website which, on the main page, has two floating divs. One
contains a list of navigation menu items and the other is themain
content of the page.
Occasionally that div that contains...
|
by: Arnost Sobota |
last post by:
Hello,
Suppose I want to play with DIVs as if they were type characters. I have
a series of fixed-height (width is of no importance) blocks which must
follow one another from left to right, with...
|
by: tbirnseth |
last post by:
I'm having trouble between IE and FF. For once, IE behaves as I would expect, but FF doesn't.
Basically I have a container with two floating DIVs in it. One floats left and the other right. I then...
|
by: yawnmoth |
last post by:
How do you get both of these div's to have a 100% width? (1):
<div style="float: left; background: black; color: white">Hello, world!
</div>
<div style="clear: both; background: blue; color:...
|
by: benwah1983 |
last post by:
Greetings,
Here is my problem:
The following code shows a div with two small nested divs (images with a title), then the div is closed. Another one opens and a "random text" is displayed.
<div...
|
by: dlite922 |
last post by:
This is just barely above my head when it comes to css.
I have a div that needs to contain rows of floating divs, but I need each row not to wrap on to the next one and continue to go right. The...
|
by: nlindsay |
last post by:
I am trying to center align 2 left floated divs within a % width background. I know that setting the wrapper div to a fixed width works, but can it be done with a fluid background? (basically I...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
